<template >
    <div class="flex">

        <div class="w-4/12 flex flex-col h-auto">
            <el-row class="text-sl">
                <el-col :span="12">
                    <div class="flex flex-col justify-between">
                        <div class="h-28 bg-white p-8 flex items-center justify-start hover:cursor-pointer hover:bg-slate-50"
                            @click="toPage('/ReplyMessage')">
                            <el-icon class="bg-[#80aeeb] p-2 rounded-3xl mr-2" :size="40" color="#fff">
                                <ChatDotRound />
                            </el-icon>
                            <div class="pl-4">
                                <div class=" text-center">{{ 2 }}</div>
                                <div>待回复我的</div>
                            </div>
                        </div>
                        <div class="h-28 bg-white p-8 flex items-center justify-start mt-4 hover:cursor-pointer hover:bg-slate-50"
                            @click="toPage('/MessageReviewed')">
                            <el-icon class="bg-[#a18ed7] p-2 rounded-3xl mr-2" :size="40" color="#fff">
                                <Clock />
                            </el-icon>
                            <div class="pl-4">
                                <div class=" text-center">{{ 2 }}</div>
                                <div>超时的</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="h-28 bg-white p-8 flex items-center justify-start ml-2 hover:cursor-pointer hover:bg-slate-50"
                        @click="toPage('/OvertimeWorkOrder')">
                        <el-icon class="bg-[#f1d89e] p-2 rounded-3xl mr-2" :size="40" color="#fff">
                            <UserFilled />
                        </el-icon>

                        <div class="pl-4">
                            <div class=" text-center">{{ 2 }}</div>
                            <div>待审核的</div>
                        </div>
                    </div>
                    <div class="h-28 bg-white p-8 flex items-center justify-start mt-4 ml-2 hover:cursor-pointer  hover:bg-slate-50"
                        @click="toPage('/GroupWorkOrder')">
                        <el-icon class="bg-[#8df0f0] p-2 rounded-3xl mr-2" :size="40" color="#fff">
                            <Briefcase />
                        </el-icon>
                        <div class="pl-4">
                            <div class=" text-center">{{ 2 }}</div>
                            <div>我所在组的</div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div class="w-full mt-4 h-72 min-h-min bg-white p-2 pl-0 pr-0 pb-0 overflow-y-scroll">
                <div class="flex items-center pl-6 pt-2 text-base mb-4">
                    <el-icon class="bg-[#56a6e2] p-1 rounded-3xl mr-2" :size="26" color="#fff">
                        <BellFilled />
                    </el-icon>
                    公告
                </div>
                <!-- <div class=" text-xl flex items-center h-4/5 justify-center">
                    暂无公告
                </div> -->
                <div v-for="item in state.messageList" :key="item.id"
                    class="flex pl-6 pt-1 pb-1 hover:cursor-pointer hover:bg-slate-200" @click="toDetails(item.id)">
                    <el-badge class="mark" value="new" v-if="item.status === 1" />
                    <div class="ml-2 p-1 pl-0">{{ item.message }}</div>
                </div>
            </div>

        </div>
        <div class="w-8/12 flex flex-col h-auto ml-4">
            <!-- 统计图 -->
            <div class="w-full h-60 min-h-min bg-white p-2">
                <div class="pl-6 flex justify-between">
                    <el-radio-group v-model="tabPosition">
                        <el-radio-button label="top" size="small">全部</el-radio-button>
                        <el-radio-button label="right" size="small">部门</el-radio-button>
                        <el-radio-button label="bottom" size="small">自己</el-radio-button>
                    </el-radio-group>
                    <div>
                        <el-select v-model="state.selectDate" placeholder="Select" class="mr-4">
                            <el-option v-for="item in state.dateList" :key="item.value" :label="item.label"
                                :value="item.value" :disabled="item.disabled" />
                        </el-select>

                        <el-tooltip placement="top">
                            <template #content>下载图片</template>
                            <el-icon @click="exportChart" class="mr-2 hover:cursor-pointer">
                                <Download />
                            </el-icon>
                        </el-tooltip>
                    </div>

                </div>
                <div class=" h-64 relative">
                    <!-- 绘制折线图 -->
                    <v-chart ref="myChart" :option="state.chartOptions" autoresize :loading="false"
                        class="h-full absolute bottom-4" />
                </div>
            </div>
            <!-- 我处理的 -->
            <div class="w-full mt-4 h-72 bg-white p-2">
                <div class="flex items-center pl-6 pt-2  text-base">
                    <el-icon class="bg-[#56a6e2] p-1 rounded-3xl mr-2" :size="26" color="#fff">
                        <Clock />
                    </el-icon>
                    我处理的
                </div>
                <el-table :data="state.workorderList" style="width: 100%" class=" hover:cursor-pointer">
                    <el-table-column prop="status" width="90">
                        <template #default="scope">
                            <el-tag :type="getStatusTagType(scope.row.status)">{{ getStatusText(scope.row.status)
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="priority" width="90">
                        <template #default="scope">
                            <el-tag :type="getPriorityTagType(scope.row.priority)" hollow>{{
                                getPriorityText(scope.row.priority) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" class=" cursor-pointer"></el-table-column>
                    <el-table-column prop="avatar" width="60">
                        <template #default="scope">
                            <!-- <img :src="require(`./images/${scope.row.avatar}`)" alt="avatar" width="50" height="50"> -->
                            <el-avatar :size="30"
                                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="assignee" width="120"></el-table-column>
                </el-table>
            </div>

        </div>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from 'vue-router';
import { Download } from '@element-plus/icons-vue';
import { messageRead } from '../api/message/message'
import { BellFilled, ChatDotRound, Briefcase, UserFilled, Clock } from "@element-plus/icons-vue";
import { useTabsStore } from '../store/store'
const useData = useTabsStore()
const state = reactive({
    dateList: [
        {
            value: '一天内',
            label: '一天内',
        },
        {
            value: '一周内',
            label: '一周内',
        },
        {
            value: '一月内',
            label: '一月内',
        }
    ],
    workorderList: [
        {
            id: 1,
            status: 0,
            priority: 0,
            content: '网络连接问题',
            assignee: 'Alice',
            avatar: 'alice-avatar.jpg'
        },
        {
            id: 2,
            status: 1,
            priority: 1,
            content: '打印机故障',
            assignee: 'Bob',
            avatar: 'bob-avatar.jpg'
        },
        {
            id: 3,
            status: 2,
            priority: 0,
            content: '电源问题',
            assignee: 'Charlie',
            avatar: 'charlie-avatar.jpg'
        },
    ],
    selectDate: '一周内',
    chartOptions: {
        // ECharts 图表的配置项
        legend: {}, // 图例
        xAxis: {
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        tooltip: {
            trigger: 'axis', // 配置触发类型，'axis' 表示同时显示该列的所有数据
            formatter: function (params)
            {
                // 在悬停时自定义提示框的内容
                var result = params[0].name + '<br>'; // 第一列的名称
                for (var i = 0; i < params.length; i++) {
                    result += params[i].marker + params[i].seriesName + ': ' + params[i].value + '<br>';
                }
                return result;
            }
        },
        series: [
            {
                name: '当日发布工单数',
                type: 'line',
                data: [10, 20, 15, 25, 30, 18, 24]
            },
            {
                name: '当日处理工单数',
                type: 'line',
                data: [8, 18, 12, 20, 25, 15, 20]
            },
            {
                name: '当日完成工单数',
                type: 'line',
                data: [6, 16, 10, 18, 22, 12, 16]
            }
        ]
    },
    messageList: [],
    pageData: {
        total: '',
        pageSize: '',
        pageNum: ''
    }
})
const myChart = ref()
// 下载折线统计图图片
const exportChart = () =>
{
    // 获取 ECharts 实例
    const chartInstance = myChart.value.chart;

    // 使用 toDataURL 方法将图表导出为图片
    chartInstance.convertToPixel({ seriesIndex: 0 }, [0, 0]); // 防止图表未渲染完全时导出空白图片
    const imgDataUrl = chartInstance.getDataURL({
        type: 'png',  // 图片格式，可以是 'png', 'jpeg', 'svg' 等
        pixelRatio: 2, // 图片的分辨率，可以根据需要调整
        backgroundColor: '#fff'  // 图片背景色
    });

    // 创建一个链接并模拟点击下载
    const link = document.createElement('a');
    link.href = imgDataUrl;
    link.download = 'chart.png'; // 下载的文件名
    link.click();
}
// 实例化路由
const router = useRouter();
// 跳转
const toPage = (path) =>
{
    // 传递数值并跳转
    router.push(path);
}
// 标签
const getStatusTagType = (status) =>
{
    return status === 0 ? 'success' : status === 1 ? 'warning' : 'danger';
}
const getStatusText = (status) =>
{
    return status === 0 ? '待处理' : status === 1 ? '处理中' : '已处理';
}
const getPriorityTagType = (priority) =>
{
    return priority === 0 ? 'info' : priority === 1 ? 'primary' : 'success';
}
const getPriorityText = (priority) =>
{
    return priority === 0 ? '一般' : priority === 1 ? '中等' : '紧急';
}

// 初始化
const init = async () =>
{

}
const getMessageList = async () =>
{
    const result = await messageRead({ operationType: 'announcement', messageStatus: 1, pagination: false })
    console.log(result, "=====>");
    if (result.meta.status === 200) {
        state.messageList = result.data.readResult
        console.log(result, "消息数据");
        state.messageList = state.messageList.filter(item => { return item.user_id === useData.getUserData().UserID })
        // state.pageData.total = result.data.total
        // state.pageData.pageSize = result.data.pageSize
        // state.pageData.pageNum = result.data.pageNum
    }
}
//获取消息详情内容

const toDetails = (id) =>
{
    // 通过路由传递ID参数

    // router.push('/MessageDetail');
    router.push({ path: '/MessageDetail', query: { messageID: id } })
}

onMounted(() =>
{
    init()
    getMessageList()
})
</script>
<style lang="scss" scoped></style>